<template>
	<div class="">
		<div id="word_cloud_view_id" />
	</div>
</template>

<script>
	let echarts = require('echarts/lib/echarts')
	require('echarts-wordcloud');
	import 'echarts/theme/macarons.js'
	export default {
		name: 'word_cloud_index',
		data: () => ({
			word_cloud_view: null,
			word_cloud_options: {},
			word_list: [{
					"name": "学区房",
					"value": 10927
				}, {
					"name": "泰禾厦门湾",
					"value": 5902
				}, {
					name: "融创孔雀镇",
					value: 15000
				},
				{
					name: "核心地段",
					value: 10081
				},
				{
					name: "文旅度假",
					value: 9386
				},
				{
					name: "配套丰富 ",
					value: 7500
				},
				{
					name: "航天首府",
					value: 7500
				},
				{
					name: "昆明文旅城",
					value: 6500
				},
				{
					name: "大理的小院子",
					value: 6500
				},
				
				{
					name: "海景房",
					value: 9386
				},
				{
					name: "拎包入住 ",
					value: 7500
				},
				{
					name: "别墅",
					value: 7500
				},
				{
					name: "现房",
					value: 6500
				},
				{
					name: "孔雀城壹号时区",
					value: 6500
				},
				
				{
					name: "昆明",
					value: 9386
				},
				{
					name: "惠州 ",
					value: 7500
				},
				{
					name: "广东",
					value: 7500
				},
				{
					name: "烟台",
					value: 6500
				},
			]
		}),
		methods: {
			draw_word_cloud_view() {
				if(this.word_cloud_view) {
					this.word_cloud_view.dispose();
				}
				this.word_cloud_view = document.getElementById('word_cloud_view_id') && echarts.init(document.getElementById('word_cloud_view_id'), 'macarons');
			},
			init_view_data() {
				let word_cloud_series = [{
					type: 'wordCloud',
					shape: 'circle',
					left: 'center',
					top: 'center',
					width: '100%',
					height: '100%',
					right: null,
					bottom: null,
					sizeRange: [16, 36],
					rotationRange: [0, 0],
					
					autoSize: {
						enable: true,
						minSize: 6,
						maxSize: 12,
					},
					textPadding: 16,
					drawOutOfBound: false,
					textStyle: {
						normal: {
							fontFamily: 'sans-serif',
//							fontWeight: 'bold',
							// Color can be a callback function or a color string
							color: function() {
								// Random color
								return 'rgb(' + [
//									Math.round(Math.random() * 100),
//									Math.round(Math.random() * 100),
//									Math.round(Math.random() * 100)
									0, 190, 255
								].join(',') + ')';
							}
						},
						emphasis: {
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					data: this.word_list
				}]

				this.word_cloud_options = {
					series: word_cloud_series
				}
				this.word_cloud_view.setOption(this.word_cloud_options)
			},
		},
		mounted() {
			let that = this;
			this.draw_word_cloud_view();
			that.init_view_data();
			setInterval(function(){
				that.init_view_data();
			}, 3000)
		},
		render(h) {
			return h('div', {
				attrs: {
					id: 'word_cloud_view_id'
				},
				style: {
					height: '400px',
					width: '400px'
				}
			})
		}
	}
</script>
<style scoped>
	#word_cloud_view_id {
		width: 400px;
		margin: 0 auto;
		height: 138px;
	}
</style>